<template>
	<view class="content">

		<!-- <view class="name">{{name}}</view> -->

		<view style="width: 60vw; height: 90rpx; margin: 0 auto; margin-top: 50rpx;">
			<image style="width: 100%; height: 100%;" :src="headline" mode=""></image>
		</view>

		<view class="details">
			<view class="forr" v-for="(item, idx) in list" @click="rich_text(item.init_id, item.title, item.content)">
				<view class="wenzhang">{{item.title}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: null,
				list: [],
				headline: null,
				exercise: '../../../../static/activity/health/exercise.png',
				health: '../../../../static/activity/health/health.png',
			}
		},
		onLoad(opt) {
			if (opt.name == '运动营养指导') {
				this.headline = this.exercise
			} else if (opt.name == '专题健康微课') {
				this.headline = this.health
			}
			this.name = opt.name
			this.data_list();
		},
		methods: {
			data_list() {
				var self = this
				self.$boya.Request({
					url: '/api/activity/article',
					data: {
						type: 20,
					}
				}, function(res) {
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (self.name == data[i].name) {
							self.list = data[i].init_index
							console.log('list: ', self.list);
						}
					}
				}, false)
			},
			rich_text(id, title, content) {
				uni.navigateTo({
					url: '/pages/activities/health/secondLevel/richText?id=' + id + '&title=' + title + '&content=' + content
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #D4EAA4, #A5D63F);
	}

	.name {
		text-align: center;
		font-size: 50rpx;
		margin: 50rpx;
		font-weight: bold;
	}

	.details {
		width: 90%;
		height: 85vh;
		max-height: 85vh;
		overflow: auto;
		margin: 0 auto;
		margin-top: 50rpx;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 15rpx;
	}

	.forr {
		margin: 40rpx 0;
		padding-top: 5rpx;
		/* background-color: aquamarine; */
	}

	.wenzhang {
		border-bottom: 1rpx solid #ccc;
		margin: 0 40rpx;
		padding-bottom: 5rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>